<template>
 <div>

  <div>
             <el-form :inline="true"  class="demo-form-inline">
          <el-form-item label="电影名称">
            <el-input v-model="queryMovie" placeholder="请输入电影名称"></el-input>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="queryMoviePage()">查询</el-button>
          </el-form-item>
        </el-form>
        <el-button type="text" @click="dialogFormVisible = true">添加电影</el-button>
  </div>
  <div>
   <el-table
    :data="movieList"
    style="width: 100%">
    
    <el-table-column
      label="电影名称"
      width="100"
      prop="mname">
      
    </el-table-column>

    <el-table-column
      label="主演"
      width="100"
      prop="actor">
      
    </el-table-column>

    <el-table-column
      label="导演"
      width="100"
      prop="director">
      
    </el-table-column>
    <el-table-column
      label="介绍"
      width="500"
      prop="detail">
      
    </el-table-column>
    <el-table-column
      label="时长"
      width="100"
      prop="movieDuration">
      
    </el-table-column>

    <el-table-column
      label="上映时间"
      width="100"
      prop="releaseDate">
      
    </el-table-column>
    <el-table-column
      label="是否上架"
      width="100">
       <template slot-scope="scope">
                  <span v-text="scope.row.status=='1'?'上架':'下架'"></span>
       </template>
    </el-table-column>
    <el-table-column
      label="获得奖项"
      width="100"
      prop="reward">
      
    </el-table-column>
    <el-table-column
      label="预告片"
      width="100"
      prop="prevue">
      
    </el-table-column>
    <el-table-column
      label="类别"
      width="100"
      prop="tname">
      
    </el-table-column>
    <el-table-column
      label="宣传海报"
      width="100"
      >
      <template slot-scope="scope">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.img">
                    </el-image>
       </template>
    </el-table-column>
    

    <el-table-column label="操作" width="150px">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.row.id)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->

  <el-pagination
            background
            style="text-align:center"
            layout="prev, pager, next"
            :total="pageInfo.total"
            :page-size="pageInfo.pageSize"
            @prev-click="queryMoviePage"
            @next-click="queryMoviePage"
            @current-change="queryMoviePage">
          </el-pagination>
            </div>

<!-- 修改电影信息 -->
        <div>
        <el-dialog title="修改员工" :visible.sync="dialogUpdateVisible">
           <el-form ref="form" :model="movieUpdateShow" label-width="80px">
            <el-form-item label="电影名称">
              <el-input v-model="movieUpdateShow.mname"></el-input>
            </el-form-item>
            <el-form-item label="主演">
              <el-input v-model="movieUpdateShow.actor"></el-input>
            </el-form-item>
            <el-form-item label="导演">
              <el-input v-model="movieUpdateShow.director"></el-input>
            </el-form-item>
             <el-form-item label="简介">
              <el-input v-model="movieUpdateShow.detail"></el-input>
            </el-form-item> 
            

            <!-- <el-form-item label="头像上传">
              <el-upload
                class="avatar-uploader"
                action="http://localhost:9001/admin/addCinema/upload"
                name="headerImg"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item> -->

            
             <el-form-item label="预告片">
              <el-input v-model="movieUpdateShow.prevue"></el-input>
            </el-form-item>

            <el-form-item label="影片类型">
              <el-select v-model="movieUpdateShow.tname" placeholder="请选择部门">
                  <el-option label="请选择" :value="0"></el-option>
                  <el-option v-for="t in types" :label="t.tname" :value="t.id" v-bind:key="t.id"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="电影海报">
              <el-input v-model="movieUpdateShow.img"></el-input>
            </el-form-item>

           

            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存</el-button>
              <el-button @click="dialogUpdateVisible=false">取消</el-button>
            </el-form-item>
          </el-form> 
        </el-dialog>
      </div>

  <!-- 添加电影信息 -->

      <div>
        <el-dialog title="添加电影" :visible.sync="dialogFormVisible">
          <el-form ref="form" :model="addMovieList" label-width="80px">
            <el-form-item label="电影名称">
              <el-input v-model="addMovieList.mname"></el-input>
            </el-form-item>
            <el-form-item label="演员列表">
              <el-input v-model="addMovieList.actor"></el-input>
            </el-form-item>
            <el-form-item label="主演">
              <el-input v-model="addMovieList.actorName"></el-input>
            </el-form-item>
            <el-form-item label="主演海报">
              <el-input v-model="addMovieList.aimg"></el-input>
            </el-form-item>

            <el-form-item label="导演">
              <el-input v-model="addMovieList.director"></el-input>
            </el-form-item>
             <el-form-item label="简介">
              <el-input v-model="addMovieList.detail"></el-input>
            </el-form-item>

           
            <el-form-item label="时长">
              <el-input type="textarea" v-model="addMovieList.movieDuration"></el-input>
            </el-form-item>
            <el-form-item label="观影人数">
              <el-input type="textarea" v-model="addMovieList.viewerCount"></el-input>
            </el-form-item>
            <el-form-item label="全球票房排行">
              <el-input type="textarea" v-model="addMovieList.movieBoxOffice"></el-input>
            </el-form-item>
            <el-form-item label="上映时间">
              <el-input type="textarea" v-model="addMovieList.releaseDate"></el-input>
            </el-form-item>
            <el-form-item label="上映地点">
              <el-input type="textarea" v-model="addMovieList.country"></el-input>
            </el-form-item>
             <el-form-item label="是否上架">
             <el-radio-group v-model="addMovieList.status">
                  <el-radio :label="1" :value="1" >上架</el-radio>
                  <el-radio :label="0" :value="0" >下架</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="获得奖项">
              <el-input v-model="addMovieList.reward"></el-input>
            </el-form-item>
             <el-form-item label="预告片">
              <el-input v-model="addMovieList.prevue"></el-input>
            </el-form-item>
            <el-form-item label="售票数量">
              <el-input v-model="addMovieList.ticketCount"></el-input>
            </el-form-item>
            <el-form-item label="评分">
              <el-input v-model="addMovieList.rate"></el-input>
            </el-form-item>
            <el-form-item label="收藏数量">
              <el-input v-model="addMovieList.collectionCount"></el-input>
            </el-form-item>

            <el-form-item label="影片类型">
               <el-select v-model="addMovieList.typeId" placeholder="请选择部门">
                  <el-option label="请选择" :value="0"></el-option>
                  <el-option v-for="t in types" :label="t.tname" :value="t.id" v-bind:key="t.id"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="电影海报">
              <el-input v-model="addMovieList.img"></el-input>
            </el-form-item>

            <el-form-item label="电影序号">
              <el-input v-model="addMovieList.movieId"></el-input>
            </el-form-item>

           

            <el-form-item>
              <el-button type="primary" @click="addMovieVo">保存</el-button>
              <el-button @click="dialogFormVisible=false">取消</el-button>
            </el-form-item>

          </el-form>
      
        </el-dialog>
      </div> 

</div>

</template>

<script>
export default {
name: "cehis",
    data(){
        return {
            movieList:[],
            pageInfo:{},
            movieUpdateShow:{
                    id: '',
                    mname: '',
                    actor: '',
                    direntor: '',
                    detali: '',
                    movieDuration: '',
                    viewerCount: '',
                    releaseDate: '',
                    country: '',
                    status: '',
                    reward: '',
                    prevue: '',
                    tname: '',
                    img: '',
                    typeId: ''
            },
            addMovieList:{
                  id: 0,
                  mname: '',
                  actor: '',
                  director: '',
                  deteil: '',
                  movieDuration: '',
                  viewerCount: 0,
                  movieBoxOffice: 0,
                  releaseDate: '',
                  status: '',
                  reward: '',
                  prevue: '',
                  ticketCount: 0,
                  rate: '',
                  collectionCount: '',
                  typeId: '',
                  img: '',
                  movieId:'',
                  actorName:'',
                  aimg:'',
            },
            dialogUpdateVisible:false,
            queryMovie:'',
            dialogFormVisible:false,
            movieTypeList:{},
            types:[],
             
        }
    },
    methods:{
      // 分页查询电影
        queryMoviePage(page){
            this.$axios.get("http://localhost:8080/admin/movie/queryMoviePage",{
                params:{
                    now:page,
                    mname:this.queryMovie,
                }
            })
               .then(data=>{
                 console.log(data.data.data)
                    this.movieList=data.data.data.list;
                    console.log(this.movieList)
                    this.pageInfo=data.data.data;
                    })
        },
        // 点击按钮将此行数据回显到修改页面
        handleEdit(mid){
          this.dialogUpdateVisible=true;
            this.$axios.get("http://localhost:8080/admin/movie/queryMovieById",{
              params:{
                id:mid,
              }
            })
            .then(data=>{
              //console.log(data.data.data)
              this.movieUpdateShow=data.data.data;
             
            })
        },
        // 保存修改信息
        onSubmit(){
            this.$axios.put("http://localhost:8080/admin/movie/updateMovie",{
                "updateMovie":this.movieUpdateShow,
            })
            .then(data=>{
              if(data.data.code==200){
                alert("保存成功");
                this.queryMoviePage(1);
                this.dialogUpdateVisible=false;
              }else{
                alert("保存失败")
              }
            })
        },
        // 查询电影类型
        queryMovieType(){
          this.$axios.get("http://localhost:8080/admin/movie/queryMovieType")
                  .then(data=>{
                    this.types=data.data.data;
                    console.log(data);
                  })
        },
        // 添加电影信息
      addMovieVo(){
          this.$axios.put("http://localhost:8080/admin/movie/addMovie",{
            "addMovie":this.addMovieList,
          })
          .then(data=>{
            if(data.data.code==200){
              alert("保存成功")
              this.queryMoviePage(1);
              this.dialogFormVisible=false;
            }else{
              alert("保存成功")
            }
          })
      },
      // 下架电影
      handleDelete(){
          this.$axios.put("http://localhost:8080/admin/movie/deleteMovie",{
            "updateMovie":this.movieUpdateShow,
          })
          .then(data=>{
            if(data.data.code==200){
              alert("已下架");
              this.queryMoviePage(1);
            }else{
              alert("下架失败")
            }
          })
      },
    },
    mounted:function(){
            this.queryMoviePage(1);
            this.queryMovieType();
    }
        
}
</script>

<style scoped>

</style>
